import React, { Component } from "react";
import {
  View,
  Image,
  ImageBackground,
  Text,
  ScrollView
} from "react-native";
import navigationhelper from "src/components/navigationhelper";
import Layer from "src/components/Layer";
import { inject, observer } from "mobx-react/native";
import { Flex } from "@ant-design/react-native";
import NavBar from "src/components/navBar";
import getUserHelp from "../../../service/Home";
import { deviceWidth, deviceHeight } from "../../../util";
import PlayerVideo from './PlayerVideo'


@inject("userAuth")
@observer
export default class HelpCenter extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = {
      cellDataArray: [],
      dataArray: [],
    };
  }
  componentDidMount() {
    getUserHelp.fetchUserHelp({}).then(res => {
        if (res.status == "success") {
          this.setState({
            cellDataArray: res.data
          });
        }
        console.log('res==>>',res)
        //源收据
        let cellDatas = [];
        let i = 1;
        this.state.cellDataArray.map(function(item) {
          cellDatas.push({
            key: i,
            title: item.title,
            show: false,
            isPlaying: false,
            data: [
              {
                key: i,
                thumbnail: item.content[0].thumbnail,
                video_path: item.content[0].video_path
              }
            ]
          });
          i++;
        });
        this.setState({
          dataArray: cellDatas
        });
      }).catch(function(error) {
        Layer.showMsg(error.message);
      });
  }

  CellView = (info, index) => {
    return (
      <View
        style={{ height:info.show?240:50, width: deviceWidth, backgroundColor: "#fff" }}>
        <Flex
          style={{ height: 50, paddingHorizontal: 20 }}
          justify="between"
          align="center"
          onPress={() => {
            var newDataSource = this.state.dataArray;
            info.show = !info.show;
            newDataSource.splice(index,1,info);
            this.setState({
                dataArray:newDataSource
            })
          }}>
          <Text>{info.title}</Text>
          <Image source={info.show?require("src/assets/IconUp.png"):require("src/assets/IconDown.png")} />
        </Flex>

     {info.show? <Flex
       align="center"
       justify="center"
       style={{ paddingLeft:0,height:190, backgroundColor: "#000000" }}
       onPress={() => {
        this.regModal.showOrDismiss(true)
        this.regModal.setVideoUrl(info.data[0].video_path)
       }} >
    <ImageBackground    
    style={{ width:deviceWidth, height:190 }}
      source={{uri:info.data[0].thumbnail}}> 
    </ImageBackground>
     <Image
      style={{
        width: 40,
        height: 40,
        position: "absolute",
        top: 75,
        left: deviceWidth * 0.5 - 20
      }}
      source={require("src/assets/icon_video_play.png")}/>
    </Flex>:null
     }  
      </View>
    );
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <NavBar
          back={() => {
            navigationhelper.goBack();
          }}
          title={"帮助中心"}
          leftText={"返回"}
        />
        <ScrollView style={{ marginTop: 10 }} horizontal={false}>
          {this.state.dataArray.map((item, index) =>
            this.CellView(item, index)
          )}
        </ScrollView>
        <PlayerVideo
            isVisible={false}
            ref={i => this.regModal = i}
         />
      </View>
    );
  }
}